<template>
    <div>


        <div style="margin: 10px 0;"  >
          <el-input size="medium " style="width: 200px" placeholder="请输入昵称" v-model="user1.username" suffix-icon="el-icon-search"></el-input>
          <el-input size="medium " style="width: 200px" placeholder="请输入编号" suffix-icon="el-icon-message" v-model="user1.id" class="ml-5"></el-input>
          <el-input size="medium " style="width: 200px" placeholder="请输入是否是vip" v-model="user1.isvip" suffix-icon="el-icon-position" class="ml-5"></el-input>
          <el-button size="medium " class="ml-5" type="primary"  @click="handleSearch">搜索</el-button>
          <el-button size="medium " type="warning" @click="handleRest">重置</el-button>
        </div>



        <div style="margin: 10px 0">
          <el-button type="primary" style="font-size:11px" @click="handleCreate">新增 <i class="el-icon-circle-plus-outline"></i></el-button>

 <el-popconfirm
              class="ml-5"
              confirm-button-text='确定'
              cancel-button-text='我再想想'
              icon="el-icon-info"
              icon-color="red"
              title="您确定批量删除这些数据吗？"
              @confirm="delBatch"
          >

          <el-button type="danger" slot="reference" size="medium ">批量删除 <i class="el-icon-remove-outline"></i></el-button></el-popconfirm>
          <el-button type="primary" size="medium ">导入 <i class="el-icon-bottom"></i></el-button>
          <el-button type="primary" size="medium ">导出 <i class="el-icon-top"></i></el-button>
        </div>

        <el-table :data="tableData" border stripe :header-cell-class-name="headerBg" @selection-change="handleSelectionChange">
              <el-table-column type="selection" width="55"></el-table-column>
          <el-table-column prop="id" label="编号" width="140" align="center">
          </el-table-column>
          <el-table-column prop="username" label="用户名" width="120" align="center">
          </el-table-column>
          <el-table-column prop="password" label="密码" width="140" align="center">
          </el-table-column>
          <el-table-column prop="isvip" label="是否是VIP" align="center" width="140">
          </el-table-column>
          <el-table-column prop="" label="" >
          </el-table-column>
          <el-table-column label="操作"  width="200" align="center">
            <template slot-scope="scope">
                <div class="operation" v-if="scope.row.id != '1'">
              <el-button type="success" style="font-size:11px" size="medium " @click="handleUpdate(scope.row)">编辑 <i class="el-icon-edit"></i></el-button>
              <el-button type="danger" style="font-size:11px" size="medium "  @click="open">删除 <i class="el-icon-remove-outline"></i></el-button>
                </div>
            </template>
          </el-table-column>
        </el-table>
        <div style="padding: 10px 0">
          <el-pagination

              :page-sizes="[5, 10, 15, 20]"
              :page-size="pagination.pageSize"
              layout="total, sizes, prev, pager, next, jumper"
              @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
              :total="pagination.total">
          </el-pagination>
        </div>
         <el-dialog title="新增用户" align="left" :visible.sync="dialogFormVisible" width="40%" top="8vh">
                <!--
                    model	表单数据对象
                    rules	表单验证规则
                -->
                <el-form label-width="120px" :model="addUser"  ref="form">
                    <!--
                    prop	表单域 model 字段，在使用 validate、resetFields 方法的情况下，该属性是必填的
                    -->
                    <el-form-item label="用户名称：" prop="username">
                            <!-- v-model 双向数据绑定  autocomplete=off 取消自动补全功能-->
                        <el-input v-model="addUser.username" autocomplete="off"></el-input>
                    </el-form-item>
                    <el-form-item label="登录密码：" prop="password">
                        <el-input v-model="addUser.password" autocomplete="off"></el-input>
                    </el-form-item>
                    <el-form-item label="是否是VIP：" prop="isvip">
                        <el-input  v-model="addUser.isvip" autocomplete="off"></el-input>
                    </el-form-item>

                </el-form>
                <div slot="footer" class="dialog-footer">
                    <el-button @click="handleCreateCancel">取 消</el-button>
                    <el-button type="primary" @click="handleCreateConfirm">确 定</el-button>
                </div>
            </el-dialog>
             <!-- 修改用户弹层 -->
            <el-dialog title="修改用户" align="left" :visible.sync="dialogUptFormVisible" width="40%" top="8vh">
                <el-form label-width="120px" :model="updateUser" :rules="rules" ref="uptForm">
                    <el-form-item label="用户名称：" prop="username">
                        <el-input v-model="updateUser.username" autocomplete="off"></el-input>
                    </el-form-item>
                    <el-form-item label="是否是VIP：" prop="isvip">
                        <el-input v-model="updateUser.isvip" autocomplete="off"></el-input>
                    </el-form-item>
                    <el-form-item label="密码：" prop="password">
                        <el-input type="password" v-model="updateUser.password" autocomplete="off"></el-input>
                    </el-form-item>
                    <!-- <el-form-item label="套餐价格：" prop="price">
                        <el-input  v-model="updateUser.price" autocomplete="off"></el-input>
                    </el-form-item> -->

                    <!-- <el-form-item label="角色: " prop="roleIds">
                        <el-select v-model="updateUser.roleIds" multiple placeholder="请选择至少一个角色">
                            <el-option
                                    v-for="role in roleList"
                                    :key="role.id"
                                    :label="role.name"
                                    :value="role.id">
                            </el-option>
                        </el-select>
                    </el-form-item> -->
                </el-form>
                <div slot="footer" class="dialog-footer">
                    <el-button @click="handleUpdateCancel">取 消</el-button>
                    <el-button type="primary" @click="handleUpdateConfirm">确 定</el-button>
                </div>
            </el-dialog>
            <!-- end -->
    </div>
</template>

<script>
import axios from 'axios'
export default {
  name: 'user',
  data() {
    return {
        user1:{
            username:'',
            isvip:'',
            id:''
        },
         updateUser: { //用户的修改数据
                id: "",
                username: '',
                password: '',
                // roleIds: []
            },
        addUser: { // 用户数据
                username: '',
                password: '',
                isvip :''

            },
         dialogFormVisible: false,
         dialogUptFormVisible:false,
    pagination: {
                total: 10,  //总条数
                pageNum: 1, // //当前页
                pageSize: 10 //每页显示条数
            },

      tableData:[{
 id: '1',
      username: '王小虎',
      password: '123',
      isvip:'是'
      },{
 id: '2',
      username: '王虎',
      password: '123',
      isvip:'否'
      }],
      collapseBtnClass: 'el-icon-s-fold',
      isCollapse: false,
      sideWidth: 200,
      logoTextShow: true,
      headerBg: 'headerBg'
    }
  },
  created(){
this.getUserList();
  },
  methods:{
    //TODO: 获取用户分页数据
            getUserList() {

                let url = "/user/getUserList"
                let param = {
                    currentPage : this.pagination.pageNum,
                    pageSize : this.pagination.pageSize,
                    user : this.user1
                }
                axios.post(url,param).then(response=>{
                    console.log(response.data)
                    // // 指定总记录数
                    this.pagination.total = response.data.total;
                    // // 执行分页显示的数据
                    this.tableData = response.data.list;
                })
            },
            //搜索
            handleSearch() {
                //将当前页码设置为1
                this.pagination.pageNum = 1;
                this.getUserList();
            },
            //每页数量改变的时候
            handleSizeChange(val) {
                this.pagination.pageSize = val;
                this.pagination.pageNum = 1;
                this.getUserList();
            },
            //当前页码改变的时候
            handleCurrentChange(val) {
                this.pagination.pageNum = val;
                this.getUserList();
            },
    handleCreate() {
                if (this.$refs['form']) {
                    this.$refs['form'].resetFields();
                }
                this.dialogFormVisible = true;

            },
            //新增确认
            handleCreateConfirm(){
              let url="http://localhost:8098/user/addconfirm"
              axios.post(url,this.addUser).then(resp=>{
                let result=resp.data;
                if(result.code===200){
                  this.$message({
            showClose: true,
          message: result.errorMessage,
          type: 'success'
        });
        this.dialogFormVisible = false;
                }else{
                  this.$message({
            showClose: true,
          message: result.errorMessage,
          type: 'error'
        });
                }

              }).finally(()=>{

                            this.getUserList()})
            },
            //新增取消
            handleCreateCancel(){
 this.dialogFormVisible = false;
            },
            //将查询条件置空
            handleRest() {
                this.user1 = {
                    username: '',
                    id:'',
                    isvip:''

                }
            },
     open() {
        this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          this.$message({
            type: 'success',
            message: '删除成功!'
          });
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          });
        });
      },
      //修改用户 数据回显
            handleUpdate(row) {
                var t = this;
                if (t.$refs['uptForm']) {
                    t.$refs['uptForm'].resetFields();
                }
                t.updateUser.id = row.id;
                t.updateUser.username = row.username;
                t.updateUser.password = row.password;
                t.updateUser.isvip = row.isvip;

                //遍历取出此用户所有的角色id


                t.dialogUptFormVisible = true;

            },
            //批量选择
             handleSelectionChange(val) {
      console.log(val)
      this.multipleSelection = val
    },
      delBatch() {
      let ids = this.multipleSelection.map(v => v.id)  // [{}, {}, {}] => [1,2,3]
      console.log(ids)
      let url="http://localhost:8098/user/deleteAll"
      axios.post(url,ids).then(resp=>{
        let result=resp.data;
            if(result.code===200){
              this.getUserList()
               this.$message({
            showClose: true,
          message: '删除成功',
          type: 'success'
        });
        }else{
           this.$message({
            showClose: true,
          message: result.errorMessage,
          type: 'error'
        });
        }

      })

      }
  }
}
  </script>
